<template>
	<view class="page">
		<view class="tou_box">
			<text class="who_xueXiao">|请选择学校</text>
			<!-- <uni-search-bar class="xueXiao" :placeholder="xueXiaoString" radius="15" clearButton="always"></uni-search-bar> -->
			<input type="text" :value="xueXiaoString" placeholder="点击获取学校." class="uni-input" @click="onxueXiao" disabled="true" />
		</view>
		<view class="xuanze1_box" v-if="test==0">
			<view class="hr"></view>
			<text class="who_xueXiao">|地区选择</text>
			<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @columnchange="bindMultiPickerColumnChange">
				<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
			</picker>
			<view class="hr"></view>
			<view class="xueshengname_box">
				<text class="who_xueXiao">|学生信息     姓名</text>
				<text class="name_tost" >{{nametoststr}}</text>
			</view>		
			<input type="text" value="" placeholder="输入学生姓名." @blur="on_xuesheng_name" class="uni-input"/>
		</view>
		<view class="cuowu_box" v-else-if="test==-1">
			<image src="../../static/icon_details.png" mode="aspectFill" class="cuowu_icon"></image>
			<text class="cuowu_text">暂未接通魔方！</text>
		</view>
		<button type="primary" @click="onhuoqu">获取数据</button>
	</view>
</template>

<script>
	//test的值为 0为用户选择外国语学校，使用本地缓存模板来显示判断。
	import uniSearchBar from "../../components/uni-search-bar/uni-search-bar.vue"
	export default {
		data() {
			return {
				xueXiaoString: '',
				isc: 1,
				multiArray: [
					['十堰校区', '郧阳校区'],
					['幼儿园', '小学', '初中', '高中'],
					['小班', '中班', '幼小衔接', '国际班']
				],
				multiIndex: [0, 0, 0],
				test: -1,
				nametoststr:'*必填'
			}
		},
		methods: {
			onxueXiao(e) {
				var me = this;
				console.log("点击了搜索！");
				me.isc = 2;
				uni.navigateTo({
					url: '../xueXiaoList/xueXiaoList'
				})
			},
			bindMultiPickerColumnChange(e) {
				console.log(e);
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				this.multiIndex[e.detail.column] = e.detail.value;
				//判断用户拖动的是第几列
				switch (e.detail.column) {
					//拖动第0的的话
					case 0:
						switch (this.multiIndex[0]) {
							//选择十堰校区
							case 0:
								this.multiArray[1] = ['幼儿园', '小学', '初级中学']
								this.multiArray[2] = ['小班', '中班', '幼小衔接', '国际班']
								break;
								//选择郧阳校区
							case 1:
								this.multiArray[1] = ['幼儿园', '小学', '初级中学', '高中']
								this.multiArray[2] = ['小班', '中班', '幼小衔接', '国际班']
							default:
								break;
						}
						this.multiIndex.splice(1, 1, 0);
						this.multiIndex.splice(2, 1, 0);
						break;
						//拖动第0段的话
					case 1:
						switch (this.multiIndex[1]) {
							case 0:
								this.multiArray[2] = ['小班', '中班', '幼小衔接', '国际班']
								break;
							case 1:
								this.multiArray[2] = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
								break;
							case 2:
								this.multiArray[2] = ['初一年级', '初二年级', '初三年级']
								break;
							case 3:
								this.multiArray[2] = ['高一年级', '高二年级', '高三年级']
								break;
							default:
								break;
						}
						this.multiIndex.splice(2, 1, 0);
						break;
					default:
						break;
				}
				this.$forceUpdate()
			},
			onhuoqu(e) {
				var me = this;
				if (me.test == 0) {
					//当用户选择十堰外国语时
					//判断用户选择学校校区和段位
					console.log("d1=" + this.multiArray[0][this.multiIndex[0]]);
					console.log("d2=" + this.multiArray[1][this.multiIndex[1]]);
					console.log("d3=" + this.multiArray[2][this.multiIndex[2]]);
				}

			},
			on_xuesheng_name(e){
				console.log(e);
				var me=this;
				var stu_name=e.detail.value;
				if (stu_name==null | stu_name=='') {
					console.log("当前输入姓名为空");
				}else{
					//去服务器加载判断是否有该学生！
					uni.showLoading({
						mask:true,
						title:'加载判断中...'
					})
					//做个假的回调
					setTimeout(function() {
						uni.hideLoading();
						me.nametoststr='*学生存在';
					}, 1500);
					
				}
			}
		},
		onLoad(option) {
			console.log('页面创建成功！');
			const name = JSON.parse(decodeURIComponent(option.name));
			console.log(name);
		},
		components: {
			uniSearchBar
		},
		onShow() {
			var me = this;
			console.log("用户返回了这里!");
			//判断选择学校
			console.log("用户选择后进来");
			//获取本地缓存
			uni.getStorage({
				key: 'xueXiao',
				success(res) {
					console.log("获取成功！:" + res.data);
					if (res.data == null) {
						console.log("缓存xueXiao为空")
					} else {
						console.log("缓存不为空：xueXiao=" + res.data);
						me.xueXiaoString = res.data;
						if (res.data == '十堰外国语学校') {
							me.test = 0;
						} else {
							me.test = -1;
						}
					}

				}
			});
		}
	}
</script>

<style>
	@import url("jiaoFei_d1.css");
</style>
